通过前面的学习,我们已经知道了前端构建工具的意义,也明确了 Vite 相比于传统构建工具 Webpack 的优势。相信对于为什么要学习和使用 Vite 这个问题,你已经有了自己的答案。
回到实际的应用场景当中,我们应该如何使用 Vite 来搭建前端工程项目呢?这一节,我将和你一起近距离接触 Vite,学完本节你不仅能学会前端开发环境的搭建,更重要的是,你能上手使用 Vite 来初始化一个脚手架项目,并理解这个项目究竟是如何运行起来的。
# 环境搭建
首先需要的是代码编辑器和浏览器,我推荐安装VSCode和Chrome浏览器。
其次是安装 Node.js,如果你的系统中还没有安装 Node.js ,可以进入 Nodejs 官网下载相应的安装包进行手动安装;如果已经安装了 Node.js,你可以使用这个命令检查一下 Node.js 版本:
node -v
@前端进阶之旅: 代码已经复制到剪贴板
推荐 12.0.0 及以上版本,如果低于这个版本,推荐使用 nvm 工具切换 Nodejs 版本。
安装完 Nodejs 之后,包管理器npm也会被自动安装,你可以执行下面的命令来验证:
npm -v
@前端进阶之旅: 代码已经复制到剪贴板
当然,在现代的前端项目中,我非常不推荐使用 npm 作为项目的包管理器,甚至也不再推荐yarn(npm 的替代方案),因为两者都存在比较严重的性能和安全问题,而这些问题在 pnpm 中得到了很好的解决
因此,包管理器方面我推荐使用 pnpm,安装方式非常简单,输入如下命令即可:
npm i -g pnpm
@前端进阶之旅: 代码已经复制到剪贴板
由于默认的镜像源在国外,包下载速度和稳定性都不太好,因此我建议你换成国内的镜像源,这样pnpm install命令的体验会好很多,命令如下:
pnpm config set registry https://registry.npmmirror.com/
@前端进阶之旅: 代码已经复制到剪贴板
# 项目初始化
在搭建了基本的开发环境之后,我们进入到项目初始化阶段。你可以在终端命令行中输入如下的命令:
